<template>
    <div class="app-container" v-loading="loading">
   
        <el-row :gutter="20">
            <el-col :span="5" class="colbox">
                <el-row class="clearfix">
                     <el-date-picker
                        class="dateTime"
                        v-model="timeValue"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd">
                        </el-date-picker>
                </el-row>
                <el-row class="clearfix ">
                    <ul class="list-group list-group-ul">
                        <li class="popup-group-item selectItem" :class="value.ertId==selectItem.ertId?'selectStyle':''" v-for="(value,index) in tableData" :key="index" @click="selectValue(value)" :title="value.createTime">{{value.ertName}}</li>
                    </ul>
                </el-row>
                <el-row class="table-row clearfix"> 
                        <div class="header">
                            <span>属性</span>
                        </div>
                         <ul class="list-group list-group-striped">
                            <li class="popup-group-item">
                                <label>文件名:</label>
                                <div class="pull-left">{{ headerTitle.ertName}}</div>
                            </li>
                            <li class="popup-group-item">
                                <label>电缆布置类型:</label>
                                <div class="pull-left">{{ headerTitle.cableAssignType }}</div>
                            </li>
                            <li class="popup-group-item">
                                <label>设备序列号:</label>
                                <div class="pull-left">{{ headerTitle.deviceNum }}</div>
                            </li>
                            <li class="popup-group-item">
                                <label>装置类型:</label>
                                <div class="pull-left">{{ headerTitle.deviceType }}</div>
                            </li>
                            <li class="popup-group-item">
                                <label>电极数:</label>
                                <div class="pull-left">{{ headerTitle.electrodeNum }}</div>
                            </li>
                            <li class="popup-group-item">
                                <label>电极间距:</label>
                                <div class="pull-left">{{ headerTitle.electrodeSpace }}</div>
                            </li>
                            <li class="popup-group-item">
                                <label>发射波形:</label>
                                <div class="pull-left">{{  headerTitle.emissionWaveform}}</div>
                            </li>
                            <li class="popup-group-item">
                                <label>工业频率:</label>
                                <div class="pull-left">{{  headerTitle.industryHz}}</div>
                            </li>
                            <li class="popup-group-item">
                                <label>迭代次数:</label>
                                <div class="pull-left">{{  headerTitle.iterationNum}}</div>
                            </li>
                            <li class="popup-group-item">
                                <label>纬度:</label>
                                <div class="pull-left">{{  headerTitle.latitude}}</div>
                            </li>
                            <li class="popup-group-item">
                                <label>通道数:</label>
                                <div class="pull-left">{{  headerTitle.pipelineNum}}</div>
                            </li>
                            <li class="popup-group-item">
                                <label>测点数:</label>
                                <div class="pull-left">{{  headerTitle.pointsNum}}</div>
                            </li>
                             <li class="popup-group-item">
                                <label>脚本名称:</label>
                                <div class="pull-left">{{  headerTitle.scriptName}}</div>
                            </li>
                             <li class="popup-group-item">
                                <label>脚本类型:</label>
                                <div class="pull-left">{{  headerTitle.scriptType}}</div>
                            </li>
                             <li class="popup-group-item">
                                <label>温度:</label>
                                <div class="pull-left">{{  headerTitle.temperature}}</div>
                            </li>
                            <li class="popup-group-item">
                                <label>测试方法:</label>
                                <div class="pull-left">{{  headerTitle.testMethod}}</div>
                            </li>
                            <li class="popup-group-item">
                                <label>测试时间:</label>
                                <div class="pull-left">{{  headerTitle.testTime}}</div>
                            </li>
                            <li class="popup-group-item">
                                <label>天气:</label>
                                <div class="pull-left">{{  headerTitle.weather}}</div>
                            </li>
                            <li class="popup-group-item">
                                <label>创建时间:</label>
                                <div class="pull-left">{{  headerTitle.createTime}}</div>
                            </li>
                        </ul>
                </el-row>
            </el-col>
            <el-col :span="19"  class="colbox leftbox">
                 <el-row class="clearfix ">
                    <div class="imageshow">
                        <label class="">原始图</label>
                        <a class="dowload" @click="downloadRes">下载数据</a>
                    </div>
                    <div class="imageBox">
                        <el-image class="renderImage" fit="fit" :src="renderSrc" :preview-src-list="[renderSrc]" lazy></el-image>
                    </div>
                </el-row>
                <el-row class="clearfix">
                    <div class="imageshow">
                        <label class="">反演图</label>
                        <a class="dowload" @click="downloadInv">下载数据</a>
                    </div>
                    <div class="setting">
                        <el-row :gutter="20">
                            <el-col :span="5">
                                <label>属性配置</label>
                                <el-select v-model="setting.value" class="selectValue" size="mini" placeholder="请选择">
                                    <el-option
                                    v-for="item in valueOptions"
                                    :key="item.label"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="6">
                                <span>插值点数</span>
                                <el-input-number class="numsty" v-model="setting.neededPointNum" :step="1" controls-position="right" size="mini" ></el-input-number>
                                <span>插值半径</span>
                                <el-input-number class="numsty"  v-model="setting.radius" :step="1" controls-position="right" size="mini"></el-input-number>
                            </el-col>
                            <el-col :span="6">
                                <!-- <el-checkbox v-model="setting.DoiChecked">DOI estimate</el-checkbox>
                                <el-checkbox v-model="setting.contourChecked">Contour</el-checkbox>
                                <el-checkbox v-model="setting.equalChecked">Equal</el-checkbox> -->
                            </el-col>
                            <el-col :span="5">
                                 <label>颜色选择</label>
                                <el-select v-model="setting.color" size="mini" class="selectValue" placeholder="请选择">
                                    <el-option
                                    v-for="item in colorOptions"
                                    :key="item.label"
                                    :label="item.label"
                                    :value="item.label">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="2" >
                                <el-button class="apply" @click="ertInversionImg()">应用</el-button>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="">
                    </div>
                    <canvasDraw :src="ertData" :lineStr="lineStr"  />
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>

import canvasDraw from '../popup/drawCanvas'
import {getListByErtInfoId,getDownloadRes,getErtInversionImg,getDownloadInv,getErtRenderImg,getErtRenderInv} from "@/api/data/proDataForup"
import { saveAs } from 'file-saver'
export default {
    name: 'ertImage',
    components: {
        canvasDraw
	},
    data() {
        return {
            loading:false,
            popupData:{
            },
            //所有数据列表
            tableData:[],
            //选中数据项
            selectItem:{
                ertName:"数据项选择"
            },
            //数姓形式
            headerTitle:{},
            //原始图
            renderSrc:null,
            //反演图
            inversionImg:"",
            timeValue:null,
            //属性选择
            valueOptions:[
                {label:"Resistivity(lohm.m)",value:"1"},
                {label:"Resistivity(log10)",value:"2"},
                {label:"Sensitivity(log10)",value:"3"},
                {label:"Conductivity(mS/m)",value:"4"},
            ],
            //颜色选择
            colorOptions:[
                {label:"viridis"},
                {label:"viridis_r"},
                {label:"plasma"},
                {label:"plasma_r"},
                {label:"seismic"},
                {label:"seismic_r"},
                {label:"cividis"},
                {label:"cividis_r"},
                {label:"winter"},
                {label:"winter_r"},
                {label:"autumn"},
                {label:"autumn_r"},
                {label:"rainbow"},
                {label:"rainbow_r"},
                {label:"jet"},
                {label:"jet_r"},
                {label:"Spectral"},
                {label:"Spectral_r"},
                ],
            //配置信息
            setting:{
                value:"1",
                neededPointNum:5,
                radius:50,
                doiChecked:false,
                contourChecked:true,
                equalChecked:true,
                color:"viridis_r"
            },
            //过滤查询数据
            startTime:null,
            endTime:null,
            //反演后data
            ertData:{},
            //测线的起终坐标
            lineStr:[]
        };
    },
    mounted(){
        this.popupData =this.$store.getters.popupData;
        if(this.popupData.theGeom){
            let a = this.popupData.theGeom.replace("LINESTRING(","").replace("(","")
            if(a){
                let b= a.split(",")
                this.lineStr.push(b[0].split(" "))
                this.lineStr.push(b[b.length-1].split(" "))
            }
        }
        this.getPopupList()
    },
    watch:{
        selectItem(val){
            this.headerTitle = val
            this.ertRenderImg()
            this.ertInversionImg()
            
        },
        timeValue(val){
            this.startTime=val[0],
            this.endTime=val[1]
            this.getPopupList()
        }
    },
    methods: {
        //获取数据列表
        getPopupList(){
            if(this.popupData.ertInfoId){
                let reqData = {
                    ertInfoId:this.popupData.ertInfoId,
                    startTime:this.startTime,
                    endTime:this.endTime
                }
                getListByErtInfoId(reqData).then(res=>{
                    if(res.data.length!=0){
                        this.selectItem=res.data[0]
                    }else{
                        this.selectItem = {}
                    }
                    this.tableData = res.data
                })
            }
        },
        //下载原文件
        downloadRes(){
            getDownloadRes(this.selectItem.ertId).then(
                res =>{
                    let url = this.baseUrl+res.msg
                    saveAs(url,this.selectItem.ertName+".bat")
                }
            )
            // let url = this.baseUrl+"/ert/downloadRes/"+this.selectItem.ertId
        },
        //下载反演数据
        downloadInv(){
            getDownloadInv(this.selectItem.ertId).then(
                res =>{
                    let url = this.baseUrl+res.msg
                    let fileName = url.split("/").pop()
                    saveAs(url,fileName)
                }
            )
        },
        //反演图获取
        ertInversionImg(){
            this.setting.ertId=this.selectItem.ertId
            this.ertRenderInv()
            // getErtInversionImg(this.setting).then(res=>{
            //     this.inversionImg = this.baseUrl+res.msg
            // }).catch(
            //    this.inversionImg = ""
            // )
        },
        // 原数据图获取
        ertRenderImg(){
            let postData ={
                 "ertId":this.selectItem.ertId,
            }
            getErtRenderImg(postData).then(res=>{
                this.renderSrc= this.baseUrl+res.msg
            })
        },
        //选中切换
        selectValue(value){
            this.selectItem=value
        },
        //获取ert插值数据
        ertRenderInv(){
            let data={
                "ertId":this.setting.ertId,
                "neededPointNum":this.setting.neededPointNum.toString(),
                "radius":this.setting.radius.toString(),
                "zvalue":this.setting.value
            }
            getErtRenderInv(data).then(
                res=>{
                    this.ertData = res
                }
            ).catch(
               this.ertData = ""
            )
        }
    },
};
</script>

<style lang="scss" scoped>
.app-container{
    box-sizing: border-box;
    padding: 20px;
    .colbox{
        .header{
                background: #43454D;
                color: #fff;
                padding: 10px 20px;
        }
        .list-group{
            padding: 0px 20px;
            .popup-group-item{
                border: none;
                padding: 2px 0px;
            }
        .popup-group-item label{
            margin-left:5px;
            display: inline-block;
            width: 30%;
            text-align: left;
            white-space: nowrap;
            // font-weight: 500;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 13px;
        }
        .popup-group-item .pull-left{
            margin-left: 3%;
            display: inline-block;
            text-align: left;
            width: 62%;
            color: #222222;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 13px;
        }
        }
        .clearfix{
            // padding: 20px;
            background: #fff;
              .el-dropdown-link {
                    cursor: pointer;
                    color: $main-color;
                }
                .el-icon-arrow-down {
                    font-size: 14px;
                }
                .titleLabel{
                    margin-right: 20px;
                }
            .dowload{
                margin-left: 20px;
                color: $main-color;
                cursor: pointer;
            }
            .dateTime{
                width: 100%;
            }
            .list-group-ul{
                height: 230px;
                overflow: auto;
            }
        }
        .table-row{
            // padding: 0px 20px;
            /deep/ th{
                background: #F1F2F5;
            }
            /deep/ th{
                padding: 0px 0px !important;
            }
            /deep/ .el-table td{
                padding: 0px 0px !important;
            }
        }
        .imageBox{
                text-align: center;
                width: 100%;
                // height: 400px;
                // background: #1d221d;
                overflow: auto;
        }
        .imageshow{
            padding: 10px 20px;
        }
    }
    .leftbox{
        height:calc(100vh - 120px);
        overflow: auto;
    }

}   
.setting{
    padding: 0px 20px;
    border-bottom: 1px solid #EDEFF4;
    /deep/ .el-button{
        padding: 10px 20px;
    }
    
    .numsty{
        width: 70px;
        margin-left: 5px;
        margin-right: 5px;
    }
    .selectValue{
            width: 60%;
            margin-left: 15px;
    }
    .apply{
        background: #43454D;
        color: #fff;
        margin-bottom: 15px;
    }
}
.selectItem{
        cursor: pointer;
        padding: 5px !important;
    }
.selectItem:hover{
    background: #F1F2F5;
}
.renderImage{
    height: 80%;
}
.selectStyle{
    background:#F1F2F5;
}
</style>